<template>
    <div>
        <div class="node-wrap" v-if="nodeConfig.type!=4&&nodeConfig.type!=9">
            <div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')">
                <div>
                    <div class="title" :style="'background: rgb('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][nodeConfig.type] +');'">
                        <span class="iconfont" v-show="nodeConfig.type==1"></span>
                        <span class="iconfont" v-show="nodeConfig.type==2"></span>
                        <span v-if="nodeConfig.type==0">{{nodeConfig.nodeName}}</span>
                        <input type="text" class="ant-input editable-title-input" v-if="nodeConfig.type!=0&&isInput"
                        @blur="blurEvent()" @focus="($event)=>{$event.currentTarget.select()}"
                        v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.type]">
                        <span class="editable-title" @click="clickEvent()" v-if="nodeConfig.type!=0&&!isInput">{{nodeConfig.nodeName}}</span>
                        <i class="anticon anticon-close close" v-if="nodeConfig.type!=0" @click="delNode()"></i>
                    </div>
                    <div class="content" @click="setPerson">
                        <div class="text" v-if="nodeConfig.type==0">{{arrToStr(nodeConfig)?arrToStr(nodeConfig):'所有人'}}</div>
                        <div class="text" v-if="nodeConfig.type==1">
                            <span class="placeholder" v-if="!funct.setApproverStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
                            {{funct.setApproverStr(nodeConfig)}}
                        </div>
                        <div class="text" v-if="nodeConfig.type==2">
                            <span class="placeholder" v-if="!funct.copyerStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
                            {{funct.copyerStr(nodeConfig)}}
                        </div>
                        <i class="anticon anticon-right arrow"></i>
                    </div>
                    <div class="error_tip" v-if="isTried&&nodeConfig.error">
                        <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
                    </div>
                </div>
            </div>
            <addNode v-model:childNodeP="nodeConfig.childNode"></addNode>
        </div>
        <div class="branch-wrap" v-if="nodeConfig.type===4&&nodeConfig.type!=9">
            <div class="branch-box-wrap">
                <div class="branch-box">
                    <button class="add-branch" @click="addTerm">添加条件</button>
                    <div class="col-box" v-for="(item,index) in nodeConfig.conditionNodes" :key="index">
                        <div class="condition-node">
                            <div class="condition-node-box">
                                <div class="auto-judge" :class="isTried&&item.error?'error active':''">
                                    <div class="sort-left" v-if="index!==0" @click="arrTransfer(index,-1)">&lt;</div>
                                    <div class="title-wrapper">
                                        <input type="text" class="ant-input editable-title-input" v-if="isInputList[index]"
                                        @blur="blurEvent(index)" @focus="($event)=>{$event.currentTarget.select()}"  v-model="item.nodeName">
                                        <span class="editable-title" @click="clickEvent(index)" v-if="!isInputList[index]">{{item.nodeName}}</span>
                                        <span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{item.priorityLevel}}</span>
                                        <i class="anticon anticon-close close" @click="delTerm(index)"></i>
                                    </div>
                                    <div class="sort-right" v-if="index!==nodeConfig.conditionNodes.length-1"
                                        @click="arrTransfer(index)">&gt;</div>
                                    <div class="content" @click="setPerson(item.priorityLevel)">{{funct.conditionStr(nodeConfig,index)}}</div>
                                    <div class="error_tip" v-if="isTried&&item.error">
                                        <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
                                    </div>
                                </div>
                                <addNode v-model:childNodeP.sync="item.childNode"></addNode>
                            </div>
                        </div>
                        <nodeWrap v-if="item.childNode && item.childNode" v-model:nodeConfig.sync="item.childNode" :tableId="tableId" :isTried="isTried"></nodeWrap>
                        <div class="top-left-cover-line" v-if="index===0"></div>
                        <div class="bottom-left-cover-line" v-if="index===0"></div>
                        <div class="top-right-cover-line" v-if="index===nodeConfig.conditionNodes.length-1"></div>
                        <div class="bottom-right-cover-line" v-if="index===nodeConfig.conditionNodes.length-1"></div>
                    </div>
                </div>
                <addNode v-model:childNodeP="nodeConfig.childNode"></addNode>
            </div>
        </div>
        <nodeWrap v-if="nodeConfig.childNode && nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" :tableId="tableId" :isTried="isTried"></nodeWrap>
    </div>
</template>
<script>
import { computed, onMounted, ref, watch } from 'vue'
import funct from '/@/utils/preload.js'
import { useStore } from '/@/store/index';
export default {
    props: ["nodeConfig", "flowPermission", "isTried", "tableId"],
    emits:["nodeConfig","flowPermission"],
    setup(props,ctx) {
        const store = useStore()
        let placeholderList = ref(["发起人", "审核人", "抄送人"])
        let isInputList = ref([])
        let isInput = ref(false)
       // console.log(props.nodeConfig,"---",props.flowPermission,"---",props.isTried,"----",props.tableId);
        // 函数
        onMounted(()=>{
             if (props.nodeConfig.type === 1) {
                props.nodeConfig.error = !funct.setApproverStr(props.nodeConfig)
            } else if (props.nodeConfig.type === 2) {
                props.nodeConfig.error = !funct.copyerStr(props.nodeConfig)
            } else if (props.nodeConfig.type === 4) {
                for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
                    props.nodeConfig.conditionNodes[i].error = funct.conditionStr(props.nodeConfig, i) === "请设置条件" && i !== props.nodeConfig.conditionNodes.length - 1
                }
            }
        })
        // 自定义函数
        const clickEvent=(index)=> {
            if (index || index === 0) {
                isInputList.value[index]=true
            } else {
                isInput.value = true;
            }
        }
        const blurEvent=(index)=>{
            if (index || index === 0) {
                isInputList.value[index]=false
                props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName ? props.nodeConfig.conditionNodes[index].nodeName : "条件"
            } else {
                isInput.value = false;
                props.nodeConfig.nodeName = props.nodeConfig.nodeName ? props.nodeConfig.nodeName : placeholderList.value[props.nodeConfig.type]
            }
        }
        const delNode=()=> {
            ctx.emit("update:nodeConfig", props.nodeConfig.childNode);
        }
        const addTerm=()=> {
            let len = props.nodeConfig.conditionNodes.length + 1
            props.nodeConfig.conditionNodes.push({
                "nodeName": "条件" + len,
                "type": 3,
                "priorityLevel": len,
                "conditionList": [],
                "nodeUserList": [],
                "childNode": null,
                Datalist:[]
            });
            for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
                props.nodeConfig.conditionNodes[i].error = funct.conditionStr(props.nodeConfig, i) === "请设置条件" && i !== props.nodeConfig.conditionNodes.length - 1
            }
            ctx.emit("update:nodeConfig", props.nodeConfig);
        }
        const delTerm=(index)=> {
            props.nodeConfig.conditionNodes.splice(index, 1)
            props.nodeConfig.conditionNodes.map((item, index) => {
                item.priorityLevel = index + 1
                item.nodeName = `条件${index + 1}`
            });
            for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
                props.nodeConfig.conditionNodes[i].error = funct.conditionStr(props.nodeConfig, i) === "请设置条件" && i !== props.nodeConfig.conditionNodes.length - 1
            }
            ctx.emit("update:nodeConfig", props.nodeConfig);
            if (props.nodeConfig.conditionNodes.length === 1) {
                if (props.nodeConfig.childNode) {
                    if (props.nodeConfig.conditionNodes[0].childNode) {
                        reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode)
                    } else {
                        props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
                    }
                }
                ctx.emit("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
            }
        }
        const reData=(data, addData)=> {
            if (!data.childNode) {
                data.childNode = addData
            } else {
                reData(data.childNode, addData)
            }
        }
        watch(()=>{return store.state.form.approverConfig},(val)=>{
                // props.nodeConfig=val.value
                //console.log(val.id,props.nodeConfig);
                if(val.id&&val.id===props.nodeConfig.id){
                    ctx.emit("update:nodeConfig",val.value)
                }
        },{deep:true})
        watch(()=>{return store.state.form.copyerConfig},(val)=>{
                // props.nodeConfig=val.value
                if(val.id&&val.id===props.nodeConfig.id){
                    ctx.emit("update:nodeConfig",val.value)
                }
        },{deep:true})
        watch(()=>{return store.state.form.conditionsConfig},(val)=>{
             //   console.log(val,"llllllllllllll");
                if(val.id&&val.id===props.nodeConfig.id){

                    ctx.emit("update:nodeConfig",val.value)
                }
        },{deep:true})
        watch(()=>{return store.state.form.flowPermission},(val)=>{
                console.log(val,props.nodeConfig.id);
                if(val.id===props.nodeConfig.id){
                    console.log(val.id,props.nodeConfig);
                    ctx.emit("update:nodeConfig",val.value)
                }
        },{deep:true})
        const setPerson=(priorityLevel)=> {
           // console.log(priorityLevel);
            var { type } = props.nodeConfig;
            if (type === 0) {
                store.commit('updatePromoter',true)
                console.log(props.nodeConfig);
                store.commit('updateFlowPermission',{
                    value:props.nodeConfig,
                    flag:false,
                    id:props.nodeConfig.id//用户id
                })
            } else if (type === 1) {
                store.commit('updateApprover',true)
                store.commit('updateApproverConfig',{
                    value: {...JSON.parse(JSON.stringify(props.nodeConfig)),
                    ...{settype:props.nodeConfig.settype ? props.nodeConfig.settype : 1}},
                    flag:false,
                    id:undefined
                })
            } else if (type === 2) {
                store.commit('updateCopyer',true)
                store.commit('updateCopyerC1',{
                    value:JSON.parse(JSON.stringify(props.nodeConfig)),
                    flag:false,
                    id:props.nodeConfig.id
                })
            } else {
                store.commit('updateCondition',true)
                store.commit('updateConditionsConfig',{
                    value:JSON.parse(JSON.stringify(props.nodeConfig)),
                    priorityLevel,
                    flag:false,
                    id:undefined
                })
            }
        }
        const arrTransfer=(index, type = 1)=> {//向左-1,向右1
            props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(index + type, 1, props.nodeConfig.conditionNodes[index])[0];
            props.nodeConfig.conditionNodes.map((item, index) => {
                item.priorityLevel = index + 1
            })
            for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
                props.nodeConfig.conditionNodes[i].error = funct.conditionStr(props.nodeConfig, i) === "请设置条件" && i !== props.nodeConfig.conditionNodes.length - 1
            }
            ctx.emit("update:nodeConfig", props.nodeConfig);
        }
        function arrToStr(arr){
            if (arr.nodeUserList) {
                return arr.nodeUserList.map(item => { return item.name }).toString()
            }
        }
        return {
            placeholderList,
            isInputList,
            isInput,
            clickEvent,
            blurEvent,
            delNode,
            addTerm,
            delTerm,
            reData,
            setPerson,
            arrTransfer,
            funct,
            store,
            arrToStr
        }
    }
}
</script>
<style>
.error_tip {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(150%, 0px);
    font-size: 24px;
}
.promoter_person .el-dialog__body {
    padding: 10px 20px 14px 20px;
}
.selected_list {
    margin-bottom: 20px;
    line-height: 30px;
}
.selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid rgba(220, 220, 220, 1);
}
.selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
}
</style>